<template>
    <div class="store_header">
        <van-icon name="arrow-left" class="icon" @click="toBack" />
        <div>{{ title }}</div>
        <!-- 生成订单页面的编辑按钮 -->
        <div class="edit" v-if="edit && store.state.cartList.length" @click="editClick">{{ store.state.edit ? '编辑':'完成' }}</div>
    </div>
</template>
<script>
import { defineComponent } from 'vue';
import {useRouter} from 'vue-router';
import mitter from '../common/js/mit' //导入监听
import { showFailToast  } from 'vant';//轻提示
import { useStore } from 'vuex';//导入仓库
import store from '../store';
export default defineComponent({
    name: 'App',
    props: ['title','edit'],
    setup() {
        const router = useRouter();
        const store = useStore();
        const toBack = () => {
            router.back()
        }
        // 点击编辑按钮事件
        const editClick = ()=>{
            if(store.state.cartList.length){
                store.commit("EDIT")
                mitter.emit("edit")
            }else{
                showFailToast("购物车空空如也")
            }
        }
        return {
            toBack,
            editClick,
            store
        }
    }

})
</script>

<style lang="less" scoped>
.store_header {
    background-color: #fff;
    height: 40px;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #d7ddd7;

    .icon {
        position: absolute;
        left: 10px;
    }
    .edit{
        font-size: 10px;
        position: absolute;
        font-weight: 600;
        right: 0;
        margin-right: 40px;
    }

}
</style>